<template>
  <div class="systemPage-wrapper">
    <div class="topbar">
      <span class="icon iconfont iconxitongpingtai-jiemianguanli"></span>
      <span>界面管理</span>
    </div>
    <div class="content-background">
      <div class="content-wrapper">
        <div class="operating-wrapper searches-wrapper">
          <div class="buttons-wrapper">
            <span class="systemButtonDelete" @click="handlePage(1)">删除</span>
            <span class="systemButtonAdd" @click="pageAdd">新增</span>
            <span class="systemButtonStart" @click="handlePage(2)">启用</span>
            <span class="systemButtonStart" @click="handlePage(3)">停用</span>
          </div>
          <div class="query-wrapper">
            <div class="query-box">
              <span class="span-name">页面名称：</span>
              <el-input class="systemInput" v-model="customPage.customPage.text" placeholder="请输入名称" @change="search"></el-input>
            </div>
            <div class="query-box">
              <span class="span-name">页面编码：</span>
              <el-input class="systemInput" v-model="customPage.customPage.code" placeholder="请输入编码" @change="search"></el-input>
            </div>
            <div class="query-box">
              <span class="span-name">页面状态：</span>
              <el-select
                  @change="search"
                  class="systemInput"
                  v-model="customPage.customPage.status"
                  clearable
                  placeholder="请选择状态"
              >
                <el-option
                    v-for="item in statusMap"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                ></el-option>
              </el-select>
            </div>
            <span class="query-box systemButtonQuery" @click="search">查询</span>
          </div>
        </div>
        <el-table
            class="systemTable"
            v-if="tableShow"
            :data="tableData"
            :height="tableHeight"
            stripe
            @selection-change="handleSelectionChange"
        >
          <el-table-column
              type="selection"
              label-class-name="disabledSelection"
              width="50"
              header-align="center"
              align="center"
          ></el-table-column>
          <el-table-column prop="text" label="页面名称"></el-table-column>
          <el-table-column prop="code" label="页面编码" width="150"></el-table-column>
          <el-table-column prop="type" label="应用类型" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.type === 1 ? '电脑端' : '手机端' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="template" label="应用模板" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.template === '1' ? '有流程' : '无流程' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="200" sortable></el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <span :class="scope.row.status">{{ scope.row.status ? '可用' : '不可用' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <div class="row">
                <span class="icon iconfont">&#xe688;</span>
                <span @click.stop="copyPage(scope.row)">克隆</span>
              </div>
              <div class="row">
                <span class="icon iconfont">&#xe636;</span>
                <span @click.stop="editData(scope.row)">编辑</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            class="systemPagination"
            :current-page="pageIndex"
            :page-sizes="[originPageSize, 20, 30, 40]"
            :page-size="pageSize"
            layout="sizes,slot, prev, pager, next, jumper"
            :total="totalCount"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        >
          <span class="totalCount">从{{ start }}到{{ end }}/共{{ totalCount }}条数据</span>
        </el-pagination>
      </div>
    </div>
    <config-page v-if="configPageShow" @configPageClose="handleConfigPage" :pageId="pageId" :pageTitile="pageTitile"></config-page>
  </div>
</template>

<script>
import {
  pageList,
  pageDelete,
  pageEnable,
  pageDisable,
  pageDetail,
  pageSave,
} from '@/system/api/customPage'
import ConfigPage from './configPage'

export default {
  data() {
    return {
      tableData: [],
      tableShow: false,
      pageIndex: 1,
      totalCount: 0,
      tableHeight: 0,
      pageSize: 0,
      start: 1,
      end: null,
      originPageSize: null,
      customPage: {
        customPage: {},
      },
      selectedDatas: [],
      statusMap: [
        {value: 1, label: '可用'},
        {value: 0, label: '不可用'},
      ],
      configPageShow: false,
      pageId: null,
      pageTitile:""
    }
  },
  components: {ConfigPage},
  async mounted() {
    await this.getTableHeight()
    this.tableShow = true
    this.tableInitialization()
  },
  methods: {
    // 获得table高度
    getTableHeight() {
      let contentHeight = document.getElementsByClassName(
          'content-wrapper'
      )[0].offsetHeight
      let searchesHeight = 72
      this.tableHeight = contentHeight - searchesHeight - 92
      let tableBodyHeight = this.tableHeight - 40
      this.pageSize = parseInt(tableBodyHeight / 40)
      this.originPageSize = this.pageSize
    },
    // table初始化
    tableInitialization() {
      this.customPage.pageSize = this.pageSize
      this.customPage.pageIndex = this.pageIndex - 1
      pageList(this.customPage).then((res) => {
        if (res.success) {
          this.tableData = res.info
          this.totalCount = res.totalCount
          this.end =
              res.totalCount % this.pageSize === 0
                  ? parseInt(res.totalCount / this.pageSize)
                  : parseInt(res.totalCount / this.pageSize) + 1
        } else {
          this.message(res.msg, 3)
          this.tableData = []
          this.totalCount = 0
          return
        }
      })
    },
    // table勾选
    handleSelectionChange(e) {
      this.selectedDatas = JSON.parse(JSON.stringify(e))
    },
    // 编辑数据
    editData(e) {
      console.log(JSON.stringify(e));
      this.pageId = JSON.parse(JSON.stringify(e.id))
      this.pageTitile=JSON.parse(JSON.stringify(e.text));
      this.configPageShow = true
    },
    // 克隆页面
    async copyPage(e) {
      const detail = await pageDetail({id: e.id})
      let children = this.deleteId(detail.info.control.children)
      let copyPage = detail.info
      const tableName = copyPage.tableName
      // 页面初始化
      copyPage.text = detail.info.text + '_克隆'
      copyPage.code = detail.info.code + '_copy'
      copyPage.url = '/page/record?pageId=@@pageId'
      copyPage.control.children = children
      delete copyPage.id
      delete copyPage.control.id
      // 检索组件初始化
      let searchGroup = children[0]
      if(searchGroup.constructor===Array){
        searchGroup.children.forEach(component => {
          if (component.dataType === 3) {
            component.url = "/page/dropDown?controlId=@@controlId"
          }
        })
      }
      // 按钮组件初始化
      let buttonGroup = children[1]
        if(buttonGroup.constructor === Array){
          buttonGroup.children.forEach(component => {
          if (component.attr === 'businessButtonFlow_unreported') {
            component.url = `select count(*) from ${tableName} t @@where t.wf_state = 0`
          }
          if (component.attr === 'businessButtonFlow_flowing') {
            component.url = `select count(*) from ${tableName} t @@where t.wf_state = 1`
          }
          if (component.attr === 'businessButtonFlow_completed') {
            component.url = `select count(*) from ${tableName} t @@where t.wf_state = 2`
          }
          if (component.attr === 'businessButtonFlow_invalid') {
            component.url = `select count(*) from ${tableName} t @@where t.wf_state = -1`
          }
        component.url = '/page/count?controlId=@@controlId'
        })
      }else{
        if (buttonGroup.attr === 'businessButtonFlow_unreported') {
          buttonGroup.url = `select count(*) from ${tableName} t @@where t.wf_state = 0`
          }
          if (buttonGroup.attr === 'businessButtonFlow_flowing') {
            buttonGroup.url = `select count(*) from ${tableName} t @@where t.wf_state = 1`
          }
          if (buttonGroup.attr === 'businessButtonFlow_completed') {
            buttonGroup.url = `select count(*) from ${tableName} t @@where t.wf_state = 2`
          }
          if (buttonGroup.attr === 'businessButtonFlow_invalid') {
            buttonGroup.url = `select count(*) from ${tableName} t @@where t.wf_state = -1`
          }
          buttonGroup.url = '/page/count?controlId=@@controlId'
      }
      copyPage.children = children
      pageSave(copyPage).then((res) => {
        if (res.success) {
          this.tableInitialization()
          this.message('新增成功', 1)
        } else {
          if (res.code === '199') {
            this.message(res.info, 3)
            return false
          } else if (res.code === '100') {
            this.message(res.msg, 3)
            return false
          }
        }
      })
    },
    deleteId(array) {
      for (let i = 0; i < array.length; i++) {
        delete array[i].id
        if (array[i].children && array[i].children.length > 0) {
          this.deleteId(array[i].children)
        }
      }
      return array
    },
    handlePage(e) {
      // 1-删除 2-启用 3-停用
      let warningText = ''
      let url = null
      switch (Number(e)) {
        case 1:
          warningText = '请选择需要删除的页面'
          url = pageDelete
          break
        case 2:
          warningText = '请选择需要启用的页面'
          url = pageEnable
          break
        case 3:
          warningText = '请选择需要停用的页面'
          url = pageDisable
          break
      }
      if (this.selectedDatas.length === 0) {
        this.message(warningText, 3)
        return
      }
      let arr = []
      this.selectedDatas.forEach((item) => {
        arr.push(item.id)
      })
      if (e === 1) {
        this.messageBox('确认删除？').then((c) => {
          if (c.action) {
            url(arr).then((res) => {
              if (res.success) {
                this.tableInitialization()
                this.message(res.msg, 1)
              } else {
                this.message(res.msg, 3)
              }
            })
          }
        })
      } else {
        url(arr).then((res) => {
          if (res.success) {
            this.tableInitialization()
            this.message(res.msg, 1)
          } else {
            this.message(res.msg, 3)
          }
        })
      }
    },
    // 翻页
    handleCurrentChange(e) {
      this.pageIndex = e
      this.tableInitialization()
    },
    handleSizeChange(e) {
      this.pageSize = e
      this.search()
    },
    // 查询
    search() {
      this.pageIndex = 1
      this.tableInitialization()
    },
    handleConfigPage(e) {
      if (e === 'close') {
        this.configPageShow = false
      }
      this.tableInitialization()
    },
    // 新增
    pageAdd() {
      this.pageId = null
      this.configPageShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
.systemPage-wrapper {
  position: relative;

  .content-background {
    .content-wrapper {
      .operating-wrapper .buttons-wrapper span:last-child::before {
        content: '\e690';
      }
    }

    .el-table ::v-deep.cell .row {
      cursor: pointer;
      float: left;
      margin-right: 18px;

      .icon {
        color: rgba(39, 149, 254, 1);
        margin-right: 5px;
      }
    }
  }

  .templePage-wrapper {
    position: absolute;
    top: 0;
  }
}
</style>
